<template>
  <h4>element button 示例</h4>
  <div>
    <el-button type="primary" size="large" :icon="ButtonIcon">Primary</el-button>
    <el-button type="primary" :icon="ButtonIcon">Primary</el-button>
    <el-button type="primary" size="small" :icon="ButtonIcon">Primary</el-button>
  </div>
  <div style="padding-top: 10px">
    <el-button type="primary" size="large" :icon="ButtonIcon" />
    <el-button type="primary" :icon="ButtonIcon" />
    <el-button type="primary" size="small" :icon="ButtonIcon" />
  </div>
  <div style="padding-top: 10px">
    <el-button type="primary" size="large" :icon="ButtonIcon" circle />
    <el-button type="primary" :icon="ButtonIcon" circle />
    <el-button type="primary" size="small" :icon="ButtonIcon" circle />
  </div>
  <slot :html="html" />
</template>

<script setup lang="tsx">
import { ref } from "vue";

import { ElButton } from "element-plus";

import MerakIcon from "../../../../../../components/MerakIcon/index.vue";

const html = ref(`
<template>
  <h4>element button 示例</h4>
  <div>
    <el-button type="primary" size="large" :icon="ButtonIcon">Primary</el-button>
    <el-button type="primary" :icon="ButtonIcon">Primary</el-button>
    <el-button type="primary" size="small" :icon="ButtonIcon">Primary</el-button>
  </div>
  <div style="padding-top: 10px">
    <el-button type="primary" size="large" :icon="ButtonIcon" />
    <el-button type="primary" :icon="ButtonIcon" />
    <el-button type="primary" size="small" :icon="ButtonIcon" />
  </div>
  <div style="padding-top: 10px">
    <el-button type="primary" size="large" :icon="ButtonIcon" circle />
    <el-button type="primary" :icon="ButtonIcon" circle />
    <el-button type="primary" size="small" :icon="ButtonIcon" circle />
  </div>
</template>

<script setup lang="tsx">
import { ElButton } from "element-plus";

import MerakIcon from "../../../../../../components/MerakIcon/index.vue";

const ButtonIcon = (
  <MerakIcon size="14">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
    </svg>
  </MerakIcon>
);
<\/script>
`);

const ButtonIcon = (
  <MerakIcon size="14">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
    </svg>
  </MerakIcon>
);
</script>
